import React from 'react';
// 用原生 window.open 在新标签页打开链接，移除 useNavigate 导入
import { useI18n } from '../../utils/in18';

// 这是一个静态的条款与政策页面，视觉上参考设计图
const Clause: React.FC = () => {
    const { t } = useI18n();
    return (
        <div className="min-h-screen bg-white text-black dark:bg-[#111111] dark:text-white py-8 pb-28">
            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                {/* 标题区域 */}
                <div className="text-center mb-6">
                    <h1 className="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-pink-200">
                        {t('terms.title')}
                    </h1>
                </div>

                {/* 卡片容器：使用多个 section 模拟图片中的多个折叠卡片 */}
                <div className="space-y-6">
                    {/* 核心政策 卡片 */}
                    <div className="bg-white border border-gray-200 rounded-lg p-5 dark:bg-gray-800 dark:border-gray-700">
                        {/* 卡片头部 */}
                        <div className="flex items-center justify-between mb-4">
                            <div className="flex items-center space-x-3">
                                <svg className="text-gray-700 dark:text-white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5742" width="20" height="20"><path d="M581.674405 6.10515a33.194542 33.194542 0 0 1 5.887978 5.37598c16.213273 3.54132 31.359882 11.306624 43.861169 22.570582l275.284301 243.967085c20.906588 18.346598 32.85321 44.970498 32.597211 72.789061V918.613729a98.388964 98.388964 0 0 1-99.668959 98.388964H184.363895a98.388964 98.388964 0 0 1-97.7063-98.388964V107.523437A98.346298 98.346298 0 0 1 184.321229 9.091806h355.241334a33.279875 33.279875 0 0 1 42.069176-2.986656z m-51.199808 68.778409H184.363895a32.554545 32.554545 0 0 0-32.597211 32.597211V918.613729c0 18.005266 14.591945 32.597211 32.597211 32.597211h655.27221a32.554545 32.554545 0 0 0 32.597211-32.597211V359.08516l-308.478843 0.042667a32.554545 32.554545 0 0 1-33.237209-32.554545V74.883559z m137.386152 602.323075a33.194542 33.194542 0 0 1 0 63.87176H288.427505a33.194542 33.194542 0 0 1 0-63.87176h379.390577z m0-193.535274a32.554545 32.554545 0 0 1 0 63.87176H288.427505a32.554545 32.554545 0 0 1 0-63.87176h379.390577z m-183.508645-180.137992a33.194542 33.194542 0 0 1-36.223864 51.114475H288.470172a33.194542 33.194542 0 0 1 0-63.87176h159.658068a33.194542 33.194542 0 0 1 36.223864 12.757285zM594.346358 90.030169l0.042666 203.945902h229.545806l-229.545806-203.945902z" fill="currentColor" p-id="5743"></path></svg>
                                <h2 className="text-lg font-semibold">{t('terms.core.title')}</h2>
                            </div>
                        </div>

                        {/* 卡片内容列表 */}
                        <div className="space-y-3">
                            {/* 服务条款  */}
                            <div onClick={() => window.open('/terms-of-service', '_blank')} className="cursor-pointer flex items-center justify-between bg-gray-100 border border-gray-200 rounded px-4 py-3 dark:bg-gray-900 dark:border-gray-700">
                                <div>
                                    <div className="text-sm font-medium">{t('terms.core.terms_of_service.title')}</div>
                                    <div className="text-xs text-gray-600 dark:text-gray-400">{t('terms.core.terms_of_service.desc')}</div>
                                </div>
                                <div className="text-pink-400 lex text-sm">
                                    <span className='flex items-center '>
                                        <svg className="text-pink-400" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11478" width="14" height="14"><path d="M901.266 582c0-26.989 21.878-48.867 48.867-48.867C977.122 533.133 999 555.01 999 582v319.266C999 955.243 955.243 999 901.266 999H123.734C69.757 999 26 955.243 26 901.266V123.734C26 69.757 69.757 26 123.734 26H443c26.989 0 48.867 21.878 48.867 48.867 0 26.989-21.878 48.867-48.867 48.867H123.734v777.532h777.532V582z m3.372-390.778l-333.11 332.394c-19.361 19.319-50.751 19.319-70.113 0-19.36-19.32-19.36-50.643 0-69.963L835.626 120.16H669.78c-26.057 0-47.18-21.077-47.18-47.08 0-26.001 21.123-47.079 47.18-47.079h239.593C958.872 26 999 66.042 999 115.436v239.078c0 26.002-21.123 47.08-47.181 47.08-26.058 0-47.181-21.078-47.181-47.08V191.222z" p-id="11479" fill="currentColor"></path></svg>
                                        <span className='ml-5'>{t('terms.read')}</span>
                                    </span>
                                </div>
                            </div>

                            {/* 隐私条款  */}
                            <div onClick={() => window.open('/privacy-policy', '_blank')} className="cursor-pointer flex items-center justify-between bg-gray-100 border border-gray-200 rounded px-4 py-3 dark:bg-gray-900 dark:border-gray-700">
                                <div>
                                    <div className="text-sm font-medium">{t('terms.core.privacy_policy.title')}</div>
                                    <div className="text-xs text-gray-600 dark:text-gray-400">{t('terms.core.privacy_policy.desc')}</div>
                                </div>
                                <div className="text-pink-400 text-sm">
                                    <span className='flex items-center '>
                                        <svg className="text-pink-400" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11478" width="14" height="14"><path d="M901.266 582c0-26.989 21.878-48.867 48.867-48.867C977.122 533.133 999 555.01 999 582v319.266C999 955.243 955.243 999 901.266 999H123.734C69.757 999 26 955.243 26 901.266V123.734C26 69.757 69.757 26 123.734 26H443c26.989 0 48.867 21.878 48.867 48.867 0 26.989-21.878 48.867-48.867 48.867H123.734v777.532h777.532V582z m3.372-390.778l-333.11 332.394c-19.361 19.319-50.751 19.319-70.113 0-19.36-19.32-19.36-50.643 0-69.963L835.626 120.16H669.78c-26.057 0-47.18-21.077-47.18-47.08 0-26.001 21.123-47.079 47.18-47.079h239.593C958.872 26 999 66.042 999 115.436v239.078c0 26.002-21.123 47.08-47.181 47.08-26.058 0-47.181-21.078-47.181-47.08V191.222z" p-id="11479" fill="currentColor"></path></svg>
                                        <span className='ml-5'>{t('terms.read')}</span>
                                    </span>
                                </div>
                            </div>

                            {/* <div className="flex items-center justify-between bg-gray-900 border border-gray-700 rounded px-4 py-3">
                                <div>
                                    <div className="text-sm font-medium">{t('terms.core.refund_policy.title')}</div>
                                    <div className="text-xs text-gray-400">{t('terms.core.refund_policy.desc')}</div>
                                </div>
                                <div className="text-pink-400 text-sm">{t('terms.read')}</div>
                            </div> */}
                        </div>
                    </div>

                    {/* 内容政策 卡片 */}
                    <div className="bg-white border border-gray-200 rounded-lg p-5 dark:bg-gray-800 dark:border-gray-700">
                        {/* 卡片头部 */}
                        <div className="flex items-center justify-between mb-4">
                            <div className="flex items-center space-x-3">
                                <svg className="text-gray-700 dark:text-white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7700" width="20" height="20"><path d="M512 135.04L192 267.52v275.754667c0 108.970667 72.661333 227.626667 320.213333 344.32 247.04-115.242667 319.786667-233.898667 319.786667-344.32V267.52L512 135.04zM106.666667 210.474667L512 42.666667l405.333333 167.808v332.8c0 167.68-120.874667 313.685333-405.333333 438.058666-284.458667-125.866667-405.333333-271.872-405.333333-438.058666v-332.8z m606.165333 225.024a42.666667 42.666667 0 0 0-60.330667-60.330667L469.333333 558.336l-97.834666-97.834667a42.666667 42.666667 0 0 0-60.330667 60.330667l128 128a42.666667 42.666667 0 0 0 60.330667 0l213.333333-213.333333z" fill="currentColor" p-id="7701"></path></svg>
                                <h2 className="text-lg font-semibold">{t('terms.content.title')}</h2>
                            </div>
                        </div>

                        {/* 列表 */}
                        <div className="space-y-3">
                            {/* 禁止内容条款  */}
                            <div onClick={() => window.open('/Sex-Trafficking-Policy', '_blank')} className="cursor-pointer flex items-center justify-between bg-gray-100 border border-gray-200 rounded px-4 py-3 dark:bg-gray-900 dark:border-gray-700">
                                <div>
                                    <div className="text-sm font-medium">{t('terms.content.prohibited.title')}</div>
                                    <div className="text-xs text-gray-600 dark:text-gray-400">{t('terms.content.prohibited.desc')}</div>
                                </div>
                                <div className="text-pink-400 text-sm">
                                    <span className='flex items-center '>
                                        <svg className="text-pink-400" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11478" width="14" height="14"><path d="M901.266 582c0-26.989 21.878-48.867 48.867-48.867C977.122 533.133 999 555.01 999 582v319.266C999 955.243 955.243 999 901.266 999H123.734C69.757 999 26 955.243 26 901.266V123.734C26 69.757 69.757 26 123.734 26H443c26.989 0 48.867 21.878 48.867 48.867 0 26.989-21.878 48.867-48.867 48.867H123.734v777.532h777.532V582z m3.372-390.778l-333.11 332.394c-19.361 19.319-50.751 19.319-70.113 0-19.36-19.32-19.36-50.643 0-69.963L835.626 120.16H669.78c-26.057 0-47.18-21.077-47.18-47.08 0-26.001 21.123-47.079 47.18-47.079h239.593C958.872 26 999 66.042 999 115.436v239.078c0 26.002-21.123 47.08-47.181 47.08-26.058 0-47.181-21.078-47.181-47.08V191.222z" p-id="11479" fill="currentColor"></path></svg>
                                        <span className='ml-5'>{t('terms.read')}</span>
                                    </span>
                                </div>
                            </div>

                            {/* 内容筛查条款  */}
                            {/* <div className="flex items-center justify-between bg-gray-900 border border-gray-700 rounded px-4 py-3">
                                <div>
                                    <div className="text-sm font-medium">{t('terms.content.moderation.title')}</div>
                                    <div className="text-xs text-gray-400">{t('terms.content.moderation.desc')}</div>
                                </div>
                                <div className="text-pink-400 text-sm">{t('terms.read')}</div>
                            </div> */}


                            {/* 内容移除条款  */}
                            <div onClick={() => window.open('/Content-Removal-Policy', '_blank')} className="cursor-pointer flex items-center justify-between bg-gray-100 border border-gray-200 rounded px-4 py-3 dark:bg-gray-900 dark:border-gray-700">
                                <div>
                                    <div className="text-sm font-medium">{t('terms.content.report.title')}</div>
                                    <div className="text-xs text-gray-600 dark:text-gray-400">{t('terms.content.report.desc')}</div>
                                </div>
                                <div className="text-pink-400 text-sm">
                                    <span className='flex items-center '>
                                        <svg className="text-pink-400" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11478" width="14" height="14"><path d="M901.266 582c0-26.989 21.878-48.867 48.867-48.867C977.122 533.133 999 555.01 999 582v319.266C999 955.243 955.243 999 901.266 999H123.734C69.757 999 26 955.243 26 901.266V123.734C26 69.757 69.757 26 123.734 26H443c26.989 0 48.867 21.878 48.867 48.867 0 26.989-21.878 48.867-48.867 48.867H123.734v777.532h777.532V582z m3.372-390.778l-333.11 332.394c-19.361 19.319-50.751 19.319-70.113 0-19.36-19.32-19.36-50.643 0-69.963L835.626 120.16H669.78c-26.057 0-47.18-21.077-47.18-47.08 0-26.001 21.123-47.079 47.18-47.079h239.593C958.872 26 999 66.042 999 115.436v239.078c0 26.002-21.123 47.08-47.181 47.08-26.058 0-47.181-21.078-47.181-47.08V191.222z" p-id="11479" fill="currentColor"></path></svg>
                                        <span className='ml-5'>{t('terms.read')}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* 法律与合规 卡片 */}
                    <div className="bg-white border border-gray-200 rounded-lg p-5 dark:bg-gray-800 dark:border-gray-700">
                        {/* 卡片头*/}
                        <div className=" flex items-center justify-between mb-4">
                            <div className="flex items-center space-x-3">
                                <svg fill="currentColor" className="text-gray-700 dark:text-white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9096" width="20" height="20"><path d="M191.614 1005.632c-22.37 0-40.37-17.983-40.37-40.277 0-21.988 18.001-40.01 40.37-40.01l93.427 0 0-44.299c0-11.129 3.983-20.571 10.841-28.022l1.723-2.276c8.004-7.699 18.231-12.583 30.297-12.583l142.61 0 0-658.942c-13.443 3.139-26.278 6.837-38.843 12.275-11.796 5.115-23.214 11.396-34.282 18.562-10.61 7.737-21.184 16.297-30.032 25.741-22.907 22.29-50.295 40.545-80.633 53.147-15.091 6.281-30.795 11.702-47.996 15.415-6.321 1.168-12.832 1.994-18.885 3.143l103.422 316.074c5.515 1.991 10.956 5.113 15.477 9.98 15.397 15.474 15.397 41.158 0 56.306-19.46 19.727-43.363 36.007-69.717 47.155l0 0c-25.663 9.974-53.204 16.012-81.742 16.012-29.152 0-57.152-6.037-82.279-16.012l-2.337-1.132c-25.665-11.147-48.532-26.297-67.415-46.023-15.668-15.15-15.668-40.833 0-56.306 4.557-4.867 9.73-7.988 15.438-9.98l103.999-316.631c-5.399-0.861-10.269-1.415-15.438-2.585-17.124-3.713-33.134-9.135-47.958-15.415-15.475-5.729-30.031-13.732-42.902-22.601-13.71-8.869-26.275-19.421-37.691-30.546-9.115-10.001-9.115-25.741 0-34.323 9.423-9.98 25.127-9.98 34.285 0 9.153 8.582 19.456 17.429 30.031 24.879 11.146 7.145 22.484 13.714 34.553 18.847 12.293 4.863 25.166 8.886 38.572 11.722 12.909 2.566 26.585 4.005 40.909 4.005 13.945 0 27.734-1.438 40.529-4.005 13.098-2.835 26.354-6.858 38.917-11.722 23.939-9.997 45.965-25.435 64.58-43.725l0.537-0.556c11.414-11.414 23.406-21.698 37.156-30.567 12.563-8.867 27.427-16.318 42.289-22.598 15.401-6.838 31.412-11.99 47.959-14.864l9.5-2.281 0-76.285c0-22.292 18.538-40.604 40.794-40.604 22.027 0 40.107 18.311 40.107 40.604l0 76.285 9.652 2.281c16.547 2.874 32.868 8.026 48.035 14.864 15.398 6.283 29.725 13.732 42.903 22.598 13.102 8.869 25.894 19.422 37.078 31.123 9.502 8.582 19.461 17.429 30.339 24.879 11.414 7.145 22.831 13.714 34.588 18.847 12.222 4.863 25.169 8.886 38.499 11.722 13.254 2.566 26.354 4.005 40.642 4.005 14.287 0 28.002-1.438 40.565-4.005 13.709-2.835 26.275-6.858 38.838-11.722 24.057-9.997 46.045-25.435 64.583-43.725 9.424-9.98 25.202-9.98 34.322 0 9.118 8.582 9.118 24.322 0 34.323-22.83 22.29-49.719 40.545-80.288 53.147-15.167 6.281-31.18 11.702-47.995 15.415-4.903 1.168-10.075 1.723-15.743 2.585l104.265 316.631c5.441 1.991 10.575 5.113 15.207 9.98 16.013 15.474 16.013 41.158 0 56.306-19.42 19.727-43.13 36.007-69.754 47.155-25.129 9.974-53.165 16.012-82.047 16.012-28.805 0-56.233-6.037-81.708-16.012l-2.031-1.132c-25.969-11.147-48.57-26.297-67.683-46.023-15.668-15.15-15.668-40.833 0-56.306 4.331-4.867 9.997-7.988 15.132-9.98l104.035-316.074c-6.894-1.149-13.097-1.975-19.456-3.143-16.815-3.713-33.097-9.135-47.958-15.415-15.436-5.729-29.991-13.732-42.903-22.601-13.175-8.869-26.275-19.421-37.078-30.546-9.808-9.444-19.765-18.004-30.953-25.741-10.801-7.165-22.291-13.446-34.321-18.562-11.91-5.439-25.127-9.136-38.764-12.275l0 0 0 658.942 142.878 0c11.684 0 22.789 4.883 30.187 12.583 8.121 7.449 12.598 18.596 12.598 30.298l0 44.299 93.811 0c22.214 0 39.987 18.022 39.987 40.01 0 22.293-17.774 40.277-39.987 40.277l-639.276 0zM925.424 637.579l0 0-90.322-275.182-89.941 275.182c11.34 10.286 23.901 18.293 37.081 24.573l1.763 0.289c15.668 6.567 33.131 9.997 51.099 9.997 18.617 0 35.775-3.429 51.177-9.997l0.611 0c13.674-6.013 27.347-14.019 38.533-24.862l0 0zM276.995 637.579l0 0-89.708-275.182-90.323 275.182c10.877 10.286 23.44 18.293 37.23 24.573l1.689 0.289c15.36 6.567 32.825 9.997 51.405 9.997 17.695 0 35.392-3.429 50.639-9.997l0.267 0c13.981-6.013 27.389-14.019 38.803-24.862l0 0zM333.075 925.344l0 0 356.006 0 0-38.61c-165.707 0-184.592 0-356.006 0l0 38.61z" p-id="9097"></path></svg>                                <h2 className="text-lg font-semibold">{t('terms.legal.title')}</h2>
                            </div>
                        </div>

                        <div className="space-y-3">
                            {/* <div className="flex items-center justify-between bg-gray-900 border border-gray-700 rounded px-4 py-3">
                                <div>
                                    <div className="text-sm font-medium">{t('terms.legal.investment.title')}</div>
                                    <div className="text-xs text-gray-400">{t('terms.legal.investment.desc')}</div>
                                </div>
                                <div className="text-pink-400 text-sm">{t('terms.read')}</div>
                            </div> */}


                            {/* 未成年人保护条款  */}
                            <div onClick={() => window.open('/Underage-Policy', '_blank')} className="flex cursor-pointer items-center justify-between bg-gray-100 border border-gray-200 rounded px-4 py-3 dark:bg-gray-900 dark:border-gray-700">
                                <div>
                                    <div className="text-sm font-medium">{t('terms.legal.minor_protection.title')}</div>
                                    <div className="text-xs text-gray-600 dark:text-gray-400">{t('terms.legal.minor_protection.desc')}</div>
                                </div>
                                <div className="text-pink-400 text-sm">
                                    <span className='flex items-center '>
                                        <svg className="text-pink-400" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11478" width="14" height="14"><path d="M901.266 582c0-26.989 21.878-48.867 48.867-48.867C977.122 533.133 999 555.01 999 582v319.266C999 955.243 955.243 999 901.266 999H123.734C69.757 999 26 955.243 26 901.266V123.734C26 69.757 69.757 26 123.734 26H443c26.989 0 48.867 21.878 48.867 48.867 0 26.989-21.878 48.867-48.867 48.867H123.734v777.532h777.532V582z m3.372-390.778l-333.11 332.394c-19.361 19.319-50.751 19.319-70.113 0-19.36-19.32-19.36-50.643 0-69.963L835.626 120.16H669.78c-26.057 0-47.18-21.077-47.18-47.08 0-26.001 21.123-47.079 47.18-47.079h239.593C958.872 26 999 66.042 999 115.436v239.078c0 26.002-21.123 47.08-47.181 47.08-26.058 0-47.181-21.078-47.181-47.08V191.222z" p-id="11479" fill="currentColor"></path></svg>
                                        <span className='ml-5'>{t('terms.read')}</span>
                                    </span>
                                </div>
                            </div>

                            {/* AML反欺诈条款  */}
                            <div onClick={() => window.open('/AML-Anti-Fraud-Policy', '_blank')} className="flex cursor-pointer items-center justify-between bg-gray-100 border border-gray-200 rounded px-4 py-3 dark:bg-gray-900 dark:border-gray-700">
                                <div>
                                    <div className="text-sm font-medium">{t('terms.legal.aml_policy.title')}</div>
                                    <div className="text-xs text-gray-600 dark:text-gray-400">{t('terms.legal.aml_policy.desc')}</div>
                                </div>
                                <div className="text-pink-400 text-sm">
                                    <span className='flex items-center '>
                                        <svg className="text-pink-400" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11478" width="14" height="14"><path d="M901.266 582c0-26.989 21.878-48.867 48.867-48.867C977.122 533.133 999 555.01 999 582v319.266C999 955.243 955.243 999 901.266 999H123.734C69.757 999 26 955.243 26 901.266V123.734C26 69.757 69.757 26 123.734 26H443c26.989 0 48.867 21.878 48.867 48.867 0 26.989-21.878 48.867-48.867 48.867H123.734v777.532h777.532V582z m3.372-390.778l-333.11 332.394c-19.361 19.319-50.751 19.319-70.113 0-19.36-19.32-19.36-50.643 0-69.963L835.626 120.16H669.78c-26.057 0-47.18-21.077-47.18-47.08 0-26.001 21.123-47.079 47.18-47.079h239.593C958.872 26 999 66.042 999 115.436v239.078c0 26.002-21.123 47.08-47.181 47.08-26.058 0-47.181-21.078-47.181-47.08V191.222z" p-id="11479" fill="currentColor"></path></svg>
                                        <span className='ml-5'>{t('terms.read')}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* 帮助 卡片 */}
                    <div className="bg-white border border-gray-200 rounded-lg p-5 dark:bg-gray-800 dark:border-gray-700">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-3">
                                <svg className="text-gray-700 dark:text-white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10405" width="20" height="20"><path d="M815.25 80.23h-606.9c-111.86 0-202.87 91-202.87 202.88v470C5.48 865 96.5 956 208.35 956h606.89c111.87 0 202.88-91 202.88-202.88v-470c0.01-111.89-91-202.89-202.87-202.89zM706.43 449.74l213.14-229.11c11.03 18.34 17.76 39.56 17.76 62.49v379.13l-230.9-212.51z m108.82-288.71c14.84 0 28.89 3.05 42.06 7.92L511.79 540.34 166.3 168.95c13.17-4.87 27.22-7.92 42.05-7.92h606.9z m-711.21 59.6l213.13 229.11L86.28 662.25V283.12c0-22.92 6.73-44.15 17.76-62.49zM815.25 875.2h-606.9c-61.39 0-111.83-45.69-120.33-104.78l284.16-261.54 139.6 150.07L651.4 508.88l284.18 261.54c-8.5 59.09-58.95 104.78-120.33 104.78z" fill="currentColor" p-id="10406"></path></svg>
                                <h2 className="text-lg font-semibold">{t('terms.help.title')}</h2>
                            </div>
                        </div>

                        <div className="mt-4 bg-gray-100 border border-gray-200 rounded px-4 py-4 flex items-center justify-between dark:bg-gray-900 dark:border-gray-700">
                            <div>
                                <div className="text-sm font-medium">{t('terms.help.email_support.title')}</div>
                                <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">{t('terms.help.email_support.desc')}</div>
                            </div>
                            {/* 邮箱  */}
                            <a href={`mailto:${t('terms.help.contact_email')}`} className="bg-gray-200 flex text-black text-xs px-3 py-2 rounded dark:bg-gray-700 dark:text-white" aria-label={t('terms.help.contact_email')}>
                                <svg className="text-gray-700 dark:text-white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10405" width="14" height="14"><path d="M815.25 80.23h-606.9c-111.86 0-202.87 91-202.87 202.88v470C5.48 865 96.5 956 208.35 956h606.89c111.87 0 202.88-91 202.88-202.88v-470c0.01-111.89-91-202.89-202.87-202.89zM706.43 449.74l213.14-229.11c11.03 18.34 17.76 39.56 17.76 62.49v379.13l-230.9-212.51z m108.82-288.71c14.84 0 28.89 3.05 42.06 7.92L511.79 540.34 166.3 168.95c13.17-4.87 27.22-7.92 42.05-7.92h606.9z m-711.21 59.6l213.13 229.11L86.28 662.25V283.12c0-22.92 6.73-44.15 17.76-62.49zM815.25 875.2h-606.9c-61.39 0-111.83-45.69-120.33-104.78l284.16-261.54 139.6 150.07L651.4 508.88l284.18 261.54c-8.5 59.09-58.95 104.78-120.33 104.78z" fill="currentColor" p-id="10406"></path></svg>
                                <span className='ml-4'>
                                    {t('terms.help.contact_email')}
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Clause;


